<%@page import="ca.lscs.web.utils.SessionUtils"%>
<%@page import="java.text.DateFormat"%>
<%@page import="ca.lscs.model.UserType"%>
<%@page import="ca.lscs.model.Checklist"%>
<%@page import="ca.lscs.model.AppUser"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<%
		List<Checklist> checklists = (List<Checklist>)request.getAttribute("checklists");
		String logoutLink = (String)request.getAttribute("logout");
	%>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>LSCS</title>
		<link rel="stylesheet" type="text/css" href="/css/lscs.css" />
		<link rel="stylesheet" type="text/css" href="/css/home.css" />
		<script src="/js/closure/goog/base.js"></script>
		<script type="text/javascript">
		goog.require('goog.dom');
		goog.require('goog.net.XhrIo');
		goog.require('goog.Uri');
		
		function doView(id) {
			top.location = "/checklist/" + id;
		}
		
		function removeChecklistDom(ids) {
			for(var i=0; i<ids.length; i++) {
				var checklistDom = goog.dom.getElement('checklist-' + ids[i]);
				checklistDom.parentNode.removeChild(checklistDom);
			}
		}
		
		function getSelected() {
			var checkListTable = goog.dom.getElementsByTagNameAndClass('table', 'checklists')[0];
			var checkboxes = goog.dom.getElementsByTagNameAndClass('input', 'listitem', checkListTable);
			var ids = [];
			for(var i=0; i<checkboxes.length; i++) {
				if(checkboxes[i].checked) {
					ids.push(checkboxes[i].value);
				}
			}
			console.log(ids);
			console.log(ids.toString());
			
			return ids
		}
		
		function doDelete() {
			var ids = getSelected();
			var submitUri = new goog.Uri();
			submitUri.setPath('/ajax/checklist/delete');
			submitUri.setParameterValue('ids', ids);
			goog.net.XhrIo.send(submitUri, function(e) {
				var xhr = e.target;
				var jResponse = xhr.getResponseJson();
				removeChecklistDom(jResponse);
			}, 'POST');
		}
		
		function doSubmit() {
			var ids = getSelected();
			var submitUri = new goog.Uri();
			submitUri.setPath('/ajax/checklist/submit');
			submitUri.setParameterValue('ids', ids);
			goog.net.XhrIo.send(submitUri, function(e) {
				var xhr = e.target;
				var jResponse = xhr.getResponseJson();
				removeChecklistDom(jResponse);
			}, 'POST');
		}
		
		</script>
	</head>
	<body>
	<%@include file="header.jsp"%>
		<div class="checklist-container">
			<div class="actions">
				<%if(user.getType() == UserType.MANAGER) {%>
					<button class="action" onclick="doDelete()">Delete</button>
				<%}%>
				<%if(user.getType() == UserType.SURVEYOR) {%>
					<button class="action" onclick="doSubmit()">Submit</button>
				<%}%>
			</div>
			<table class="checklists">
				<%for(Checklist checklist : checklists) {%>
					<tr id="checklist-<%=checklist.getId()%>">
						<td><input type="checkbox" class="listitem" value="<%=checklist.getId()%>"/></td>
						<td class="title" onclick="doView(<%=checklist.getId()%>);"><%=checklist.getTitle()%></td>
						<td class="description" onclick="doView(<%=checklist.getId()%>);"><%=checklist.getDescription()%></td>
						<td class="date" onclick="doView(<%=checklist.getId()%>);"><%=DateFormat.getDateInstance(DateFormat.SHORT).format(checklist.getCreatedDate())%></td>
					</tr>
				<%}%>
			</table>
			<div class="actions">
				<%if(user.getType() == UserType.MANAGER) {%>
					<button class="action" onclick="doDelete()">Delete</button>
				<%}%>
				<%if(user.getType() == UserType.SURVEYOR) {%>
					<button class="action" onclick="doSubmit()">Submit</button>
				<%}%>
			</div>
		</div>
	</body>
</html>